<template>
	<view class="wrapper">
		<div class="header posf cfff" :style="{padding:`calc(10rpx + ${safeTop}px) 40rpx 20rpx`}">
			<div class="flex-start mb20">
				<up-icon name="arrow-left" color="#fff" size="22" @click="back"></up-icon>
				<div class="f34 ml40">评价</div>
			</div>
		</div>
		<image src="../../static/mall/top-pic.png" mode="widthFix" class="w100"></image>
		<div class="main posr">
			<div class="startop bfff center mb30" v-if="detail.goodsList">
				<image :src="detail.goodsList[0].goodsImg" mode="aspectFill" class="cover mr30"></image>
				<div class="flex1">
					<div class="center mb30">
						<div class="f30">评分</div>
						<div class="center flex1">
							<up-rate v-model="starNum" active-color="#FF5D87" inactive-color="#D8DCEB" gutter="8"
								size="40rpx"></up-rate>
						</div>
						<div class="f26">{{['','非常差','很差','一般','很好','非常好',][starNum]}}</div>
					</div>
					<!-- <div class="center">
						<div class="f30">物流</div>
						<div class="center flex1">
							<up-rate v-model="star2" active-color="#FF5D87" inactive-color="#D8DCEB" gutter="8"
								size="40rpx"></up-rate>
						</div>
						<div class="f26">很好</div>
					</div> -->
				</div>
			</div>
			<div class="talk bfff mb30">
				<div class="mb53">
					<up-upload :fileList="imgs" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="6">
						<div class="colum">
							<image src="../../static/mall/photo.png" mode="widthFix" class="photo-icon mb47"></image>
							<div class="f30 fbold">添加图</div>
						</div>
					</up-upload>
				</div>
				<!-- <div class="center mb44">
					<div class="f30 text1 bfff center mr20">整体评价</div>
					<div class="f30 text1 bfff center">包装与外观</div>
				</div> -->
				<textarea v-model="content" placeholder="说说对商品的想法吧…" placeholder-class="c666" class="f26"></textarea>
			</div>
			<!-- <div class=" flex-start">
				<image src="@/static/mall/shop_checked.png" mode="widthFix" class="t-icon"></image>
				<image src="@/static/mall/shop_check.png" mode="widthFix" class="t-icon"></image>
				<div class="f26 ml20 c333">匿名评价</div>
			</div> -->
			<div class="btn-add center" @click="evaluationAdd">
				<div class="f36 btn-address center cfff">发表评论</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/utils/config.js'
	export default {
		data() {
			return {
				starNum: 5,
				content: '',
				orderNo: '',
				detail: {},
				imgs: []
			}
		},
		onLoad(e) {
			this.orderNo = e.orderId
			this.getlogistics()
		},
		methods: {
			deletePic(event) {
				this.imgs.splice(event.index, 1);
			},
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.imgs.length;
				lists.map((item) => {
					this.imgs.push({
						...item,
						status: 'uploading',
						message: '上传中',
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this.imgs[fileListLen];
					this.imgs.splice(fileListLen, 1, {
						...item,
						status: 'success',
						message: '',
						url: result,
					});
					fileListLen++;
				}
			},

			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + '/api/upload',
						filePath: url,
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data)
							resolve(data.data);
						},
					});
				})
			},
			evaluationAdd() {
				this.$http('/api/order/evaluation/add', {
					starNum: this.starNum,
					content: this.content,
					orderNo: this.orderNo,
					imgs: this.imgs.map(r => {
						return r.url
					}),
				}, true, 'POST').then((r) => {
					this.sToast('评价成功')
					this.back(1, 1500)
				})
			},
			// 查询收货地址
			getlogistics() {
				this.$http('/api/mall/order/view', {
					orderNo: this.orderNo
				}).then((r) => {
					this.detail = r.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btn-add {
		padding: 60rpx 0;

		.btn-address {
			width: 600rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, #FF8901 0%, #FF5325 100%);
		}
	}

	.main {
		margin: -240rpx 32rpx 0;

		.startop {
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx rgba(251, 97, 136, 0.15);
			padding: 30rpx 28rpx;

			.cover {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.talk {
			width: 686rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 0rpx 30rpx rgba(251, 97, 136, 0.15);
			padding: 60rpx 28rpx;

			.mb53 {
				padding-bottom: 31rpx;
				border-bottom: 1rpx solid #DBDBDB;
			}

			.photo-icon {
				width: 80rpx;
				height: 66rpx;
			}

			.text1 {
				padding: 0 18rpx;
				height: 50rpx;
				border-radius: 26rpx;
				border: 1rpx dashed #A8ABB2;


			}
		}

		.t-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.header {
		width: 100%;
		padding: 25rpx 40rpx 210rpx;
		background: linear-gradient(to left, #F857A5, #FF5858);
		top: 0;
		left: 0;
		z-index: 5;
	}
</style>